<template>
<div>
    <a href="javascript:void(0)" class="mins" @click="goValue(-1)">-</a>
        <input autocomplete="off" type="text" :value="numb" @blur="setValue" minnum="1" class="itxt">
    <a href="javascript:void(0)" class="plus" @click="goValue(1)">+</a>
</div>
</template>
<script>
import throttle from 'lodash/throttle' 
export default {
props:['numb','skuId'],
methods:{
    goValue:throttle(function(value){
        if(value===-1){
            if(this.numb<=1){
                e.target.value=1
                this.$emit('changValue',undefined,value)
            }else{
                this.$emit('changValue',this.skuId,value)
            }
        }else{
            this.$emit('changValue',this.skuId,value)
        }
        
    },1000),
    setValue(e){
        let value=e.target.value
        if(isNaN(value)||value<=0){
            //不规范的  
            e.target.value=this.numb
            this.$emit('changValue',undefined,this.numb)
        }else{
            this.$emit('changValue',this.skuId,value-this.numb)
        }
    }
}
}
</script>
<style scoped>
 .mins{
        border: 1px solid #ddd;
        border-right: 0;
        float: left;
        color: #666;
        width: 6px;
        text-align: center;
        padding: 8px;
    }
    input{
        border: 1px solid #ddd;
        width: 40px;
        height: 33px;
        float: left;
        text-align: center;
        font-size: 14px;
    }
    .plus{
        border: 1px solid #ddd;
        border-left: 0;
        float: left;
        color: #666;
        width: 6px;
        text-align: center;
        padding: 8px;
    }
</style>